<template>
  <div class="home">
    <div class="content" ref="element">
      <div class="input">
        <img class="logo" src="../assets/img/logo.png" />
        <div class="title">{{ meetname }}报名</div>
        <Form :model="userInfo" :rules="ruleValidate" ref="recordForm">
          <FormItem prop="registerName">
            <Input
              v-model="userInfo.registerName"
              prefix="ios-contact"
              class="name"
              size="default"
              placeholder="请输入姓名(必填)"
            ></Input>
          </FormItem>
          <FormItem prop="registerPhone">
            <Input
              v-model="userInfo.registerPhone"
              prefix="ios-call"
              class="phone"
              size="default"
              placeholder="请输入手机号码(必填)"
            ></Input>
          </FormItem>
          <FormItem prop="registerCompanyUnit">
            <Input
              v-model="userInfo.registerCompanyUnit"
              prefix="md-home"
              class="company"
              size="default"
              placeholder="请输入所属单位(必填)"
            ></Input>
          </FormItem>
          <FormItem>
            <Input
              v-model="userInfo.registerEmail"
              prefix="ios-mail"
              class="email"
              size="default"
              placeholder="请输入邮箱"
            ></Input>
          </FormItem>
        </Form>
        <Input
          v-model="userInfo.registerLeaveMessage"
          class="message"
          size="large"
          :rows="4"
          type="textarea"
          @blur="fixScroll"
          maxlength="100"
          :autosize="{ maxRows: 5, minRows: 5 }"
          placeholder="对本次会议您会关注哪些方面？"
          show-word-limit
        ></Input>
        <Button class="submit" @click="subMit()">提交</Button>
        <div class="time">会议时间：4月6日 13:30-16:00</div>
      </div>
      <div class="footer">
        <a href="http://www.simtop.com.cn/" target="_blank"
          >COPYRIGHT (©) 2020 上海形拓科技有限公司</a
        >
        <span
          >联系电话：64318100-118 17717418607<br />邮箱：sales@simtop.com.cn</span
        >
      </div>
      <div class="nomeeting" v-show="errorpage">
        <img class="error" src="../assets/img/error.png" />
        <div class="errormsg">
          {{ errortext }}
        </div>
        <div class="notice">
          了解更多详情请关注上海形拓科技官网.<br /><a href="www.simtop.com.cn"
            >www.simtop.com.cn</a
          >
        </div>
      </div>
      <div class="sucesssub" v-show="success">
        <img class="successimg" src="../assets/img/success.png" />
        <div class="successmsg">
          {{ successtext }}
        </div>
        <div class="notice">
          稍后会有工作人员通知您会议入口，祝您工作生活愉快！
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Api from "../api/api";
import "../assets/css/loading.css";
export default {
  name: "Home",
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback("手机号格式不正确");
      } else {
        callback();
      }
    };

    return {
      loadingshow: true,
      userInfo: {
        meetingId: "",
        registerName: "",
        registerPhone: "",
        registerCompanyUnit: "",
        registerEmail: "",
        registerLeaveMessage: ""
      },
      ruleValidate: {
        registerName: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur"
          }
        ],
        registerPhone: [
          {
            required: true,
            type: "number",
            validator: validatePhone,
            trigger: "blur"
          }
        ],
        registerCompanyUnit: [
          {
            required: true,
            message: "单位不能为空",
            trigger: "blur"
          }
        ]
      },
      meetname: "形拓科技科技科技科技会议",
      meetingdata: {},
      salesName: "",
      errorpage: false,
      errortext: "本会议已圆满结束或未开始",
      success: false,
      successtext: "签到成功.",
      bodyHeight: 0
    };
  },
  methods: {
    subMit() {
      this.$refs["recordForm"].validate(valid => {
        if (valid) {
          this.addSubmitData();
        } else {
          this.$Message.error("提交失败!");
        }
      });
    },
    addSubmitData() {
      //添加签到记录
      var formdata = new FormData();
      formdata.append("meetingId", this.userInfo.meetingId);
      formdata.append("registerName", this.userInfo.registerName);
      formdata.append("registerPhone", this.userInfo.registerPhone);
      formdata.append("registerCompanyUnit", this.userInfo.registerCompanyUnit);
      formdata.append("registerEmail", this.userInfo.registerEmail);
      if (this.salesName) {
        //如果存在销售人员名字
        formdata.append("salesName", this.salesName);
      }
      if (this.userInfo.registerLeaveMessage.length !== 0) {
        formdata.append(
          "registerLeaveMessage",
          this.userInfo.registerLeaveMessage
        );
      }
      this.axios
        .post(Api.registerMeeting, formdata, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(res => {
          if (res.data.status == 0) {
            this.success = true;
          } else {
            if (res.data.msg) {
              window.console.log("不能重复登记");
              this.errortext = res.data.msg;
              this.errorpage = true;
            }
          }
        });
    },
    getMeetingMsg() {
      //通过二维码进入时获取当前会议信息
      this.userInfo.meetingId = this.$route.query.meetingId;
      this.salesName = this.$route.query.salesName;
      window.console.log("id=", this.userInfo.meetingId);
      this.$store.commit("setMeetingId", this.userInfo.meetingId);
      if (this.salesName) {
        this.$store.commit("setSalesName", this.salesName);
        window.console.log("销售名字：", this.salesName);
      }
      if (!this.userInfo.meetingId) {
        this.errorpage = true;
      } else {
        this.axios
          .get(Api.showMeeting, {
            params: { meetingId: this.userInfo.meetingId }
          })
          .then(res => {
            if (res.data.status == 0) {
              this.errorpage = false; //没有id时则无法打开签到页面
              this.meetname = res.data.data.meetingTitle;
              this.meetingdata = res.data.data;
              this.$store.commit("setMeetingMsg", this.meetingdata);
              var currentime = new Date();
              var meetingbegintime = new Date("2020-04-04 14:06:00"); //会议开始时间
              var meetingendtime = new Date("2020-04-06 16:00:00"); //会议结束时间
              window.console.log(currentime);
              if (
                currentime > meetingbegintime &&
                currentime < meetingendtime
              ) {
                window.console.log("当前为会议时间, 跳转会议入口链接");
                this.$router.push({ name: "verify" });
              }
            } else {
              this.errorpage = true;
              if (res.data.msg) {
                this.errortext = res.data.msg;
              }
            }
          });
      }
    },
    fixScroll() {
      window.scrolll(0, 0);
    }
  },
  created() {
    this.getMeetingMsg();
  },
  mounted() {
    let contentheight = this.$refs.element.offsetHeight;
    this.bodyHeight = document.documentElement.clientHeight;
  }
};
</script>
<style>
.home {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.content {
  width: 5.5rem;
  height: 100%;
  margin: 0 auto;
  padding-top: 0.5rem;
  border-radius: 0.15rem;
}

.input {
  position: relative;
  width: 4.8rem;
  margin: 0 auto;
}
.title {
  position: relative;
  font-family: "PingFang SC";
  font-size: 0.4rem;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  padding-top: 0.2rem;
  margin-bottom: 0.2rem;
}
.ivu-form .ivu-form-item-label {
  font-weight: bold;
  color: #ffffff;
}
.ivu-input-large {
  height: 0.7rem !important;
  font-size: 14px !important;
}
.name {
  font-family: "PingFang SC";
}
.phone {
  font-family: "PingFang SC";
  margin-top: 0.25rem;
}
.company {
  font-family: "PingFang SC";
  margin-top: 0.25rem;
}
.email {
  font-family: "PingFang SC";
  margin-top: 0.25rem;
}
.message {
  font-family: "PingFang SC";
  margin-top: 0.25rem;
}
.ivu-btn {
  display: block !important;
  margin: 0 auto;
  margin-top: 0.2rem;
  width: 1.5rem !important;
  height: 0.6rem !important;
}
.ivu-form-item {
  margin-bottom: 0 !important;
}
.nomeeting {
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
}
.error {
  display: block;
  width: 1.2rem;
  margin: 0 auto;
  padding-top: 1.5rem;
}
.errormsg {
  text-align: center;
  padding-top: 0.15rem;
  font-family: "PingFang";
  font-size: 0.28rem;
}
.sucesssub {
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
}
.successimg {
  display: block;
  width: 1.2rem;
  margin: 0 auto;
  padding-top: 2rem;
}
.successmsg {
  text-align: center;
  padding-top: 0.15rem;
  font-family: "PingFang";
  font-size: 0.28rem;
}
.logo {
  position: relative;
  width: 2.5rem;
}
.ivu-form-item-error-tip {
  color: #ffffff !important;
  font-size: 12px !important;
  padding-top: 0 !important;
}
.footer {
  width: 5rem;
  position: relative;
  margin: 0 auto;
  padding-top: 0.8rem;
  padding-bottom: 0.1rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.footer a {
  color: #a4d2ff;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
}
.footer span {
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
}
.notice {
  text-align: center;
  margin: 0 auto;
  width: 5rem;
  font-weight: bold;
  font-family: "PingFang";
  padding-top: 1rem;
}
.time {
  color: #ffffff;
  font-weight: bold;
  font-family: "PingFang";
  text-align: center;
  padding-top: 0.7rem;
  font-size: 0.32rem;
}
</style>
